<template>
	<view class="box">
		<view class="search_box">
			<u-search :clearabled="true" actionText="搜索" v-model="searchValue" bgColor="#fff"
				@clear="searchValue = null" @search="searchClick" @custom="searchClick" />
		</view>
		<!-- tab -->
		<view class="tab_box">
			<u-tabs :list="tabList" lineWidth="30" lineColor="#1677ff" :scrollable="false" @change="changeTab"></u-tabs>
		</view>
		<ArticleList :articleData="articleData"></ArticleList>
		<u-empty v-if="articleData.length<=0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
		<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />
	</view>
</template>

<script>
	import {
		dictArticle,
		articleList
	} from '../../api/api';
	import {
		size
	} from "@/util/index.js";
	import ArticleList from "@/components/ArticleList.vue"
	export default {
		components: {
			ArticleList
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.resetData();
			this.getData('isPullLoading');
		},
		// 上拉加载
		onReachBottom() {
			if (this.meta.page >= this.meta.lastPage) {
				return this.status = "nomore";
			}
			this.status = "loading";
			this.meta.page++;
			this.getData('pageChange');
		},
		data() {
			return {
				searchValue: null,
				tabList: [],
				currentData: {},
				articleData: [],
				meta: {
					page: 1,
					size,
				},
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			};
		},
		watch: {
			currentData() {
				this.resetData();
				this.getData()
			}
		},
		// 初始加载
		onShow() {
			dictArticle().then(r => {
				this.tabList = r.data.map(v => {
					return {
						name: v.name,
						id: v.id
					}
				});
				this.currentData = this.tabList[0];
			})
		},
		methods: {
			// 重置数据
			resetData() {
				this.meta = {
					...this.meta,
					page: 1
				};
				this.articleData = [];
			},
			// 搜索点击
			searchClick() {
				this.getData();
			},
			// 列表rq
			getData(type = '') {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				articleList(this.currentData.id, this.meta.page, this.meta.size, this.searchValue).then(r => {
					if (type === "pageChange") {
						this.articleData = [
							...this.articleData,
							...r.data
						]
					} else {
						this.articleData = r.data;
					}
					this.meta = {
						...r.meta,
						page: r.meta.currentPage,
						size: r.meta.perSize
					};
					this.status = "nomore";
					uni.hideLoading();
					if (type === 'isPullLoading') {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: "刷新成功"
						})
					}
				})
			},
			// tab切换
			changeTab(v) {
				this.currentData = v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;

		.search_box {
			width: 100%;
			padding-top: 10rpx;
		}

		.tab_box {
			margin-top: 10rpx;
			background: "#fff";
			width: 100%;
		}
	}
</style>
